<script setup lang="ts">
import { FetchSensor } from "@/service/getData.js"
import {ref, onMounted, reactive, watch} from 'vue'
import {
  BorderBox1,
  BorderBox4,
  Decoration5,
  DigitalFlop,
  Charts
} from '@kjgl77/datav-vue3'

const water = ref(0);
const temperature = ref(0);
const nitrogen = ref(0);
const light = ref(0);
const carbon = ref(0);

const { Sensor } = FetchSensor();
const token = localStorage.getItem("token");
const WaterConfig = reactive({
  radius: '20%',
  activeRadius: '40%',
  data: [
    {
      name: '土壤含水率',
      value: water.value
    }
  ],
  digitalFlopStyle: {
    fontSize: 15,
    fill: '#fff'
  },
  digitalFlopToFixed: 0,
  showOriginValue: true,
  lineWidth: 30,
  color: ['#00ffff']
})

const TConfig = reactive({
  data: [
    {
      name: '土壤温度(℃)',
      value: temperature.value
    }
  ],
  colors: ['#fb7293'],
  showValue: true,
  labelNum: 0,
  maxValue: 60,
  minValue: -20,
})

watch(water, (newValue) => {
  WaterConfig.data[0].value = newValue;
});

watch(temperature, (newValue) => {
  TConfig.data[0].value = newValue;
})
watch(nitrogen, (newValue) => {
  nitrogen.value = newValue;
})
watch(light, (newValue) => {
  light.value = newValue;
})
watch(carbon, (newValue) => {
  carbon.value = newValue;
})
const init = async ()=>{
  const response = await Sensor(token);
  water.value = response[0];
  temperature.value = response[1];
  nitrogen.value = response[2];
  light.value = response[3];
  carbon.value = response[4];
};
onMounted(()=>{
  init();
});
</script>

<template>
  <div class="column-container">
    <!-- 土壤含水率 -->
    <div class="container-item">
      <div w50rem h34rem flex="~ col" justify-center items-center bg-dark>
        <dv-active-ring-chart :config="WaterConfig" style="width:300px;height:300px"/>
        <div flex="~ col" gap2 justify-center items-center></div>
      </div>
    </div>

    <div class="container-item">
      <div class="flex-container">
        <!-- 土壤温度 -->
        <div w5rem h5rem flex="~ col" justify-center items-center bg-dark>
          <dv-capsule-chart :config="TConfig" style="width:10rem;height:5rem" />
        </div>

        <!-- 土壤氮含量 -->
        <div small-bg>
          <dv-loading>
            <div color-white>
              <div class="env-item">
                <span>土壤氮含量</span>
                {{ nitrogen }}
                <span>mg/kg</span>
              </div>
            </div>
          </dv-loading>
        </div>
      </div>
    </div>

    <div class="container-item">
      <div class="flex-container">
        <!-- 光照度 -->
        <div class="sensor-container">
          <dv-border-box6 class="sensor-box">
            <div class="sensor-content">
              <div class="sensor-title">光照度</div>
              <div class="sensor-value">
                {{ light }}
                <span class="unit">Lux</span>
              </div>
            </div>
          </dv-border-box6>
        </div>

        <!-- 二氧化碳 -->
        <div class="sensor-container">
          <dv-border-box6 class="sensor-box">
            <div class="sensor-content">
              <div class="sensor-title">二氧化碳</div>
              <div class="sensor-value">
                {{ carbon }}
                <span class="unit">ppm</span>
              </div>
            </div>
          </dv-border-box6>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.flex-container {
  display: flex;
  justify-content: space-between; /* 将子元素推到两端 */
  gap: var(--spacing-md); /* 设置间距 */
}
.column-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* 设置容器之间的间距 */
}

/* 容器项 */
.container-item {
  display: flex;
  justify-content: center; /* 水平居中 */
}
.sensor-container {
  width: 180px;
  height: 180px;
  padding: 10px;
}

.sensor-box {
  width: 100%;
  height: 100%;
}

.sensor-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.sensor-title {
  flex: 1;
  display: flex;
  align-items: center;
  color: yellow;
  font-size: 16px;
}

.sensor-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #00ffff;
  font-size: 24px;
}

.unit {
  font-size: 14px;
  margin-left: 2px;
}

:deep(.dv-border-box-6) {
  --border-color: #00ffff;
}
</style>